<template>
  <div class="grid-stack">
    <div
      class="grid-stack-item"
      v-for="item in moduleList"
      :key="item._id"
      :gs-id="item._id"
      :gs-x="item.x"
      :gs-y="item.y"
      :gs-w="item.w"
      :gs-h="item.h"
      :gs-min-w="getGridAttr(item.module.type).minWidth"
      :gs-min-h="getGridAttr(item.module.type).minHeight"
      :gs-max-w="getGridAttr(item.module.type).maxWidth"
      :gs-max-h="getGridAttr(item.module.type).maxHeight"
    >
      <div class="grid-stack-item-content">
        <component
          :is="getComponent(item.module.type)"
          place="dashboard"
          :ref="item._id"
          :id="item.module._id"
          :title="item.module.title"
          :describe="item.module.describe"
          :config="item.module.config"
          :data="item.module.data"
          :dataSourceType="item.module.dataSourceType"
          :type="item.module.type"
        >
          <div class="show-module-tool">
            <DeleteOutlined @click="deleteGrid(item._id)" />
          </div>
        </component>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue';
  import { GridStack } from 'gridstack';
  import { showTypeMap } from '@/constants/showType.js';

  import bar from '@/components/showModule/charts/bar.vue';
  import line from '@/components/showModule/charts/line.vue';
  import pie from '@/components/showModule/charts/pie.vue';
  import funnel from '@/components/showModule/charts/funnel.vue';
  import radar from '@/components/showModule/charts/radar.vue';
  import gauge from '@/components/showModule/charts/gauge.vue';
  import column from '@/components/showModule/charts/column.vue';
  import liquid from '@/components/showModule/charts/liquid.vue';
  import wordCloud from '@/components/showModule/charts/wordCloud.vue';
  import dualAxes from '@/components/showModule/charts/dualAxes.vue';
  import area from '@/components/showModule/charts/area.vue';
  import numberTrend from '@/components/showModule/charts/numberTrend.vue';
  import number from '@/components/showModule/number/single.vue';
  import numberMultiple from '@/components/showModule/number/multiple.vue';
  import excel from '@/components/showModule/excelTable/index.vue';
  import markdown from '@/components/showModule/markdown/index.vue';
  import richText from '@/components/showModule/richText/index.vue';
  import carousel from '@/components/showModule/image/carousel.vue';

  import { DeleteOutlined } from '@ant-design/icons-vue';
  import io from '@/utils/http/index.js';

  let gridStack = null;

  export default defineComponent({
    components: {
      DeleteOutlined,
    },

    props: {
      moduleList: {
        type: Array,
      },
    },

    data() {
      return {};
    },

    watch: {
      moduleList(v, v1) {
        this.$nextTick(() => {
          let map = {};
          v1.forEach((o) => {
            map[o._id] = 1;
          });
          v.forEach((o) => {
            if (!map[o._id]) {
              gridStack.makeWidget(document.querySelector('[gs-id="' + o._id + '"]'));
            }
          });
        });
      },
    },

    created() {},

    mounted() {
      this.init();
    },
    beforeUnmount() {
      this.$destroy();
    },
    methods: {
      init() {
        gridStack = GridStack.init({
          handleClass: 'drag-tongs',
          cellHeight: 80,
        });

        // 图表改变大小
        gridStack.on('resizestop', (event, el) => {
          const node = el.gridstackNode;
          const $refsShow = this.$refs[node.id];
          $refsShow && $refsShow.$changeSize && $refsShow.$changeSize();
        });

        gridStack.on('change', (event, items) => {
          console.log('change', items);
          this.$store.commit('kanban/setKanbanModule', items);
        });
      },

      deleteGrid(id) {
        gridStack.removeWidget(document.querySelector('[gs-id="' + id + '"]'));
        io({
          url: '/show/api/removeModule',
          method: 'post',
          data: {
            kanbanId: this.$store.state.kanban.selectedKanban._id,
            moduleId: id,
          },
        }).then((res) => {
          this.$store.commit('kanban/removeModule', id);
        });
      },

      getComponent(type) {
        let map = {
          line: line,
          area: area,
          stackArea: area,
          bar: bar,
          groupBar: bar,
          stackBar: bar,
          column: column,
          groupColumn: column,
          stackColumn: column,
          wordCloud: wordCloud,
          pie: pie,
          ring: pie,
          funnel: funnel,
          dualAxes: dualAxes,
          liquid: liquid,
          radar: radar,
          gauge: gauge,
          number: number,
          multipleNumber: numberMultiple,
          trendNumber: numberTrend,
          excel: excel,
          markdown: markdown,
          richText: richText,
          carousel: carousel,
        };
        return map[type] || line;
      },

      getGridAttr(type) {
        return showTypeMap[type].attribute;
      },

      $destroy() {
        gridStack.destroy();
        gridStack = null;
      },
    },
  });
</script>

<style lang="scss">
  .grid-stack-item-content {
    background: #fff;
    border-radius: 4px;
  }
</style>
